@import '@/lib/reset.scss';

  .headerNav {
    @include rect(1000px, 70px);
    margin: 0 auto;
    @include text-color(#DD3915);
    @include flexbox();
    align-items: center;
    .logo {
      @include rect(120px, 40px);
      background: url('./../../img/logo.jpg') no-repeat center;
      margin-left: -4px;
    }
    .searchBox {
      @include rect(380px, 44px);
      margin-left: 50px;
      form {
        @include rect(100%, 100%);
        .inp {
          input {
            @include rect(300px, 44px);
            border: 1px solid #f3f3f3;
            letter-spacing: 1px;
            padding: 5px;
            background-color: transparent;
            box-shadow: 0 2px 2px -2px rgba(0,0,0,.08);
            color: inherit;
            font-size: 16px;
            text-indent: 3px;
          }
        }
        .bn {
          input {
            width: 79px;
            height: 44px;
            border: 1px solid transparent;
            color: #fff;
            background-color: #dd3915;
            padding: 6px;
            font-size: 15px;
          }
        }
      }
      
    }
    .nav {
      ul {
        li {
          display: inline-block;       
          a {
            margin-left: 20px;
            color: #DD3915;
            line-height: 36px;
            font-size: 16px;
            &:hover {
              background-color: rgb(228, 94, 64);
              color: #fff;
            }
          } 
        }
        li:nth-of-type(2){
          position: relative;
          .kind_list{
            display: none;
            width: 380px;
            height: auto;
            background: #f3f3f3;
            position: absolute;
            top: 40px;
            left: -100px;
            padding-left: 15px;
            ul {
              margin: 24px 24px 16px;
              float: left;
              display: flex;
              line-height: 36px;
              flex-direction: column;
              li {
                text-align: left;
                width: auto;
                cursor: pointer;
                a {
                  font-size: 16px;
                  text-align: left;
                  margin-left: 0;
                }
              }
              .topbar-cat-head {
                color: #909090;
                font-size: 16px;
              }
            }
            p {
              float: left;
              width: 100%;
              line-height: 46px;
              text-align: center;
              border-top: 1px solid #fff;
              font-size: 16px;
            }
          }
          &:hover {
            .kind_list {
              display: block;
            }
            
          }
        }
      }
    }
    .user{
      float: left;
      .NoLogin {
        // display: none;
        margin-left: 87px;
        li {
          display: inline-block;
          a {
            margin-left: 9px;
            color: #DD3915;
            line-height: 36px;
            font-size: 16px;
            padding: 3px;
            &:hover {
              background-color: rgb(228, 94, 64);
              color: #fff;
            }
          }
        }
      }
      .Login {
        display: none;
        margin-left: 69px;
        li {
          float: left;
          height: 25px;
          a {
            padding: 0 14px;
            line-height: 25px;
            .iconfont{
              font-size: 28px;
              color: rgb(46, 46, 46);
              font-weight: 600;
              &:hover {
                color: #DD3915;
              }
            }
          }
        }
        li:nth-of-type(1){
          border-right: 1px solid #838383;
          position: relative;
          .mine_list {
            display: none;
            position: absolute;
            top: 28px;
            left: -12px;
            width: 90px;
            background: #f3f3f3;
            padding: 10px 0;
            li {
              width: 100%;
              text-align: center;
              border: none;
              a {
                color: #DD3915;
                line-height: 30px;
                font-size: 14px;
                padding: 2px;
                
              }
              &:hover {
                background-color: rgb(228, 94, 64);
                a {
                  color: #fff;
                }
              }
            }
          }
          &:hover {
            .mine_list{
              display: block;
            }
          }
        }
      }
    }
  }
  footer {
    position: relative;
    .footer_tab {
      @include rect(100%, 85px);
      ._tab {
        padding-top: 22px;
        li {
          @include rect(auto, 42px);
          @include display(inline-block);
          padding: 0 25px;
          @include font-size(13px);
          @include background-color(#84CF6D);
          line-height: 45px;
          margin-right: 20px;
          color: #fff;
        }
      }
    }
    .footer_list {
      @include rect(100%, auto);
      li {
        @include display(inline-block);
        padding-right: 13px;
        font-size: 13px;
        color: #909090;
        line-height: 24px;
      }
    }
    p {
        font-size: 13px;
        color: #909090;
        line-height: 24px;
    }
    aside {
      position: absolute;
      right: -10px;
      top: 80px;
      width: 138px;
      span {
        display: block;
        @include rect(32px, 28px);
        float: right;
        line-height: 28px;
        text-align: center;
      }
      .iconfont {
        font-size: 20px;
      }
      .icon-weibo {
        font-size: 23px;
      }
      p {
        width: 100%;
        float: left;
      }
    }
  }